<template>
  <div class="container">
    <el-card class="card" shadow="hover">
      <div ref="behaviorType" style="width: 100%; height: 400px"></div>
    </el-card>
    <el-card class="card" shadow="hover">
      <div ref="behaviorType1212" style="width: 100%; height: 400px"></div>
    </el-card>
  </div>
</template>

<script lang="js" setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { getBehaviorTypeWithHour, getBehaviorTypeWithHour1212 } from '@/api/index.js';
import { useRouter } from 'vue-router';

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);

const behaviorType = ref(null);
const behaviorType1212 = ref(null);
const router = useRouter();

onMounted(async () => {
  const data = await getBehaviorTypeWithHour(router);
  if (!data) return;

  const hours = Array.from(new Set(data.map(item => item.hour)));
  const behaviorTypes = ['pv', 'fav', 'cart', 'buy'];
  const series = behaviorTypes.map(type => ({
    name: type,
    type: 'line',
    stack: 'Total',
    data: hours.map(hour => {
      const item = data.find(d => d.hour === hour && d.behaviorType === type);
      return item ? item.behaviorCount : 0;
    }),
  }));

  var behaviorTypeChart = echarts.init(behaviorType.value);
  var behaviorTypeOption;

  behaviorTypeOption = {
    title: {
      text: '普通日期不同用户行为流量分析'
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        let result = params[0].name + ' 时<br/>';
        params.forEach(item => {
          result += item.marker + item.seriesName + ' : ' + item.value + ' 次<br/>';
        });
        return result;
      }
    },
    legend: {
      data: behaviorTypes,
      selected: {
        'pv': false
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        dataView: { readOnly: true },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: hours,
      name: '时',
    },
    yAxis: {
      type: 'value',
      name: '次',
      axisLine: {
        show: true,
      },
    },
    series: series
  };

  behaviorTypeOption && behaviorTypeChart.setOption(behaviorTypeOption);

  const data1212 = await getBehaviorTypeWithHour1212(router);
  if (!data1212) return;

  const hours1212 = Array.from(new Set(data1212.map(item => item.hour)));
  const series1212 = behaviorTypes.map(type => ({
    name: type,
    type: 'line',
    stack: 'Total',
    data: hours1212.map(hour => {
      const item = data1212.find(d => d.hour === hour && d.behaviorType === type);
      return item ? item.behaviorCount : 0;
    })
  }));

  var behaviorType1212Chart = echarts.init(behaviorType1212.value);
  var behaviorType1212Option;

  behaviorType1212Option = {
    title: {
      text: '双十二不同用户行为流量分析'
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        let result = params[0].name + ' 时<br/>';
        params.forEach(item => {
          result += item.marker + item.seriesName + ' : ' + item.value + ' 次<br/>';
        });
        return result;
      }
    },
    legend: {
      data: behaviorTypes,
      selected: {
        'pv': false
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        dataView: { readOnly: true },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: hours1212,
      name: '时',
    },
    yAxis: {
      type: 'value',
      name: '次',
      axisLine: {
        show: true,
      },
    },
    series: series1212
  };

  behaviorType1212Option && behaviorType1212Chart.setOption(behaviorType1212Option);
});
</script>

<style scoped>
.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card {
  margin-bottom: 20px;
}

.card:last-child {
  margin-bottom: 0;
}
</style>
